import { Button, List, WhiteSpace, WingBlank, Flex, Toast, Badge } from 'antd-mobile';
import React, { Component } from 'react';
import { Image, StyleSheet, View, Text, ScrollView, Alert, NativeModules } from 'react-native';

import { NavigationActions } from 'react-navigation'
import { Urls } from '../../utils/Urls';

const Item = List.Item;

export class MyInfoScreen extends Component {
  static navigationOptions = {
    tabBarLabel: '我的',
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('../../assets/Images/mine.png')}
        style={{ width: 25, height: 25 }}
      />
    ),
    headerTitle: '我的',
    headerTitleStyle: { alignSelf: 'center' }
  };
  state = {
    userInfo: {},
    newVersion: false
  }
  componentWillMount() {
    // NativeModules.upgrade.upgrade('http://gyxz.hwm6b6.cn/a31/rj_xqf1/weiqingli.apk')
    let url = Urls.GET_USER_INFO;
    fetch(url)
      .then((response) => {
        console.log(response)
        var responsejson = JSON.parse(response._bodyInit);
        this.setState({
          userInfo: responsejson.content
        })
      })
      .catch((error) => {
        console.log(error);
      })

    this.onCheckUpdate();
  }
  onCheckUpdate = () => {
    fetch(Urls.apkJson)
      .then(response => response.json())
      .then(data => {
          if (data.version > 1.3) {
            NativeModules.upgrade.upgrade(data.appPath)
            Toast.info('正在下载新版本', 1);
          } else {
            Toast.info('已经是最新版', 1);
          }
      })
      .catch((error) => {
        console.log(error);
      })
  };
  // updateRender () {
  //   if (this.state.newVersion) {
  //     return (
  //       <Badge dot>
  //                 <Text>有新版本，点击下载</Text>
  //             </Badge>
  //     )
  //   } else {
  //     return (
        
  //       <Text>最新版</Text>
        
  //     )
  //   }
  // }
  render() {
    const { navigate } = this.props.navigation;
    const loginAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'LoginScreen', params: { token: '123456' } })
      ]
    })
    
    return (
      <View>
        <ScrollView contentContainerStyle={styles.contentContainer}>
          <List>
            <Flex>
              {/* <Image source={{ uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530360803271&di=850dca9f622846307cbe69af4682b53e&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01460b57e4a6fa0000012e7ed75e83.png' }}
                style={styles.imagestyle}
              /> */}
              <Flex.Item>
                <Text style={styles.textStyle}>用户：{this.state.userInfo.username}</Text>
                {/* <Text style={styles.ziliao}>{this.state.userInfo.des}</Text> */}
              </Flex.Item>
            </Flex>
          </List>
          <WhiteSpace />
          <WhiteSpace />
          <List>
            <Item
              arrow="horizontal"
              // onClick={() => {}}
              onClick={() => navigate('ChooseStationScreen', {"title": "修改勾选关注的变电站"})}
            >关注变电站</Item>
            <WhiteSpace />
            <Item
              arrow="horizontal"
              // navigation={this.props.navigation}
              onClick={() => navigate('ChangePassword')}
            >修改密码</Item>
          </List>
          <WhiteSpace />
          <Item
              // arrow="horizontal"
              // onClick={() => {}}
              extra="v 1.3"
              onClick={() => this.onCheckUpdate()}
            >检查更新
            {/* { this.updateRender() } */}
          </Item>
            <WhiteSpace size="lg" />
          <WhiteSpace /><WhiteSpace /><WhiteSpace />

          <Button onClick={() => this.props.navigation.dispatch(loginAction)} type="warning">退出</Button>
          {/* <WingBlank size="lg">

            <Button onClick={() => navigate('PromptScreen', { name: 'Jane' })}>点击跳转提示页面</Button>
            
            <Button onClick={() => Alert.alert(
              'Alert Title',
              null,
              [
                { text: 'Foo', onPress: () => console.log('Foo Pressed!') },
                { text: 'Bar', onPress: () => console.log('Bar Pressed!') },
                { text: 'Baz', onPress: () => console.log('Baz Pressed!') },
              ]
            )}>停止播放音频</Button>
          </WingBlank> */}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  imagestyle: {
    width: 65,
    height: 65,
    backgroundColor: 'transparent',
    marginTop: 38,
    marginBottom: 38,
    marginLeft: 18,
  },
  textStyle: {
    fontSize: 18,
    // textAlign: 'center',
    marginBottom: 3,
    marginLeft: 10
  },
  ziliao: {
    fontSize: 12,
    // textAlign:'center',
    marginLeft: 10,
    marginTop: 15
  }
});
//   react-native link react-native-audio
